<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Perceptual Circle Scaling</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<style>
  body {
margin:0;
padding:0;
font-family:
sans-serif;
}
h1 {
position: absolute;
left: 50px;
top: 10px;
padding: 8px 2%;
margin: 0;
background: rgba(255,121,0,0.8);
box-shadow: 0 0 15px rgba(0,0,0,0.2);
border-radius: 3px;
color: whitesmoke;
font-size: 1.5em;
z-index: 800;
}
#map {
position:absolute;
top:0;
bottom:0;
width:960px;
height: 540px;
}
</style>
</head>
<body>
<div id='map'></div>
<h1>United States Population Estimates, 2019</h1>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-ajax/2.1.0/leaflet.ajax.min.js"></script>
<script>
console.log("hello world!");
var map = L.map('map', {
  center: [39.5, -95.3],
  zoom: 4
});
var Stamen_TonerLite = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}{r}.{ext}', {
attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
subdomains: 'abcd',
	minZoom: 0,
	maxZoom: 20,
ext: 'png'
}).addTo(map);
states = L.geoJson.ajax("assets/data.geojson", {
attribution: 'Data: US Census Bureau, Map: Ryan Childress',
pointToLayer: function (feature, x){
  return L.circleMarker(x, {
    color: '#ff7900',
opacity: 1,
weight: 2,
fillColor: '#ff7900',
fillOpacity: .6,
radius: calcRadius(feature.properties.estimate)
}).on({
  mouseover: function(e){
this.setStyle({color: 'blue',fillColor: 'blue'});
},
mouseout: function(e){
this.setStyle({color:'#ff7900', fillColor: '#ff7900'});
} })},});
var minValue = 578759;
var minRadius = 8;
function calcRadius(val) {
  return 1.00 * Math.pow(val/minValue,.5) * minRadius;
}

states.addTo(map);
L.control.scale({position: 'bottomleft'}).addTo(map);

</script>
</body>
</html>
